<template>
  <div class="container">
    <div class="header">
      <router-link to="/" class="flex-x-bet-y-center" style="text-decoration: none;">
        <img src="@/assets/img/logo.png" class="logo" alt="" />
        <span class="name">设备租赁</span>
      </router-link to="/">
      <span class="right-text">{{ rightText }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginHeader",
  props:{
    rightText:{
        default: ''
    }
  },
  data() {
    return {
      // state
    };
  },

  methods: {
    // method
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100px;
  background: #fff;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;

    .logo {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      margin-right: 20px;
    }

    .name {
      font-weight: 800;
      font-size: 25px;
      color: #333333;
      text-decoration: none;
    }

    .right-text {
      font-weight: 400;
      font-size: 18px;
      color: #333333;
    }
  }
}
</style>
